<template>
  <div class="wrapper">
    <div class="box box1">1变量</div>
    <div class="box box2">2计算功能</div>
    <div class="box box3">
      <span>3.嵌套</span>
    </div>
    <div class="box box4">4.继承</div>
    <div class="box box5">5.混入</div>
    <div class="box box6">6.颜色函数</div>
    <div class="box box7">7.条件语句-if</div>
    <div class="box box8">8.for循环</div>

    <div class="box box9">
      <!-- <span class="a">each</span>
      <span class="b">循</span>
      <span class="c">环</span>
      <span class="d">案</span>
      <span class="e">例</span> -->
      <div class="a">each</div>
      <div class="b">循</div>
      <div class="c">环</div>
      <div class="d">案</div>
      <div class="e">例</div>
    </div>
    <div class="box box10">10.自定义函数</div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  activated() {},
  updated() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.box {
  margin: 20px auto;
}

// 1变量使用
// 变量
$color: #1875e7;
$side: bottom;
.box1 {
  width: 200px;
  height: 100px;
  color: $color; // 普通变量
  border-#{$side}: 1px solid $color; // 变量出现在字符串之间
}

// 2计算功能
$value: 10;
.box2 {
  width: $value * 10%;
  height: $value * 10%;
  color: #1875e7;
  border-bottom: 1px solid #1875e7;
}

//3.嵌套
.box3 {
  width: 100px;
  height: 30px;
  background: tomato;
  cursor: pointer;
  span {
    color: #000;
  }
  &:hover {
    background: turquoise;
  }
}

// 4.继承
.box4 {
  @extend .box3;
}

// 5.混入
// 简单混入
@mixin size {
  width: 200px;
  height: 100px;
}
.box5 {
  @include size;
  background: violet;
}
// 混入指定参数和缺省值
@mixin fontSize($val: 10px) {
  font-size: $val;
}
.box5 {
  @include fontSize(30px);
}

// 6.颜色函数
/*　lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c
*/
.box6 {
  width: 200px;
  height: 50px;
  background: lighten(#cc3, 10%);
}

// 7.条件语句-if
$color1: red;
$color2: blue;
.box7 {
  width: 180px;
  height: 40px;
  @if #{$color} == #1875e7 {
    background: $color1;
  } @else {
    background: $color2;
  }
}

// 8.for循环
@for $i from 7 to 9 {
  .box#{$i} {
    width: 200px;
    height: 40px;
    border: #{$i}px solid pink;
  }
}

// 9.each循环
.box9 div {
  width: 40px;
  height: 40px;
  margin: 10px;
  background: olive;
}
@each $member in a, b, c, d {
  .#{$member} {
    font-size: 20px;
  }
}

// 10.自定义函数
// 函数
@function fn($data) {
  @return $data/10 + px;
}
.box10{
    width: fn(1000);
    height: fn(500);
    background: red;
}

</style>
